<template>
    <div>
        <Dialog v-model="dialogVisible1" :title="state.deteleDatas.title ? state.deteleDatas.title : '提示'" width="420">
            <p class="fontz fonts14 message_p">
                {{ state.deteleDatas.content ? state.deteleDatas.content : '是否确定删除？' }}
            </p>
            <div class="flex jcfe">
                <ElButton type="primary" v-loading="loading" v-if="state.deteleDatas.sure" @click="sureClick">
                    确定
                </ElButton>
                <ElButton v-if="state.deteleDatas.closeValue" @click="DialogClose">
                    取消
                </ElButton>
                <ElButton type="primary" v-if="state.deteleDatas.knowBool" @click="DialogClose">
                    我知道了
                </ElButton>
            </div>
        </Dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref,watch } from 'vue'
import { Dialog } from '@/components/Dialog'
import { ElButton } from 'element-plus'
import { reactive } from 'vue';
const dialogVisible1 = ref(false)
const loading=ref(false)
const emit = defineEmits(['deteleClick'])
const props = defineProps({
    deteleData: {
        type: Object,
        default: () => {
            return {}
        }
    }
})
const state=reactive({
    deteleDatas:{} as any
})
watch(() => props.deteleData, (newValue: any) => {
    console.log("删除", newValue);
    state.deteleDatas=newValue
},{deep:true,immediate:true})
const DialogOpen = () => {
    dialogVisible1.value = true
}
const DialogClose = () => {
    dialogVisible1.value = false
}
const sureClick=()=>{
    loading.value=true
    emit('deteleClick', true)
}
// 暴露方法
defineExpose({
    DialogOpen,
    DialogClose
})
</script>
<style lang="less">
.el-dialog__header {
    padding: 10px;
    border-bottom: 1px solid #D8D8D8;
}
.el-dialog__body{
    padding: 20px;
}
</style>
<style lang="less" scoped>
.message_p {
    padding: 0px 0px 40px 0px;
}
</style>